.wrap{
	width: 100%;
	height: 100%;
	background: black;
}
.loading .load{
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.loading .load_txt{
	width: 60.9375%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	animation: load 6s linear infinite;
}
@keyframes load{
	from{transform: rotate(0deg);}
	to{transform: rotate(-360deg);}
}
.animate_txt{
	width: 100%;
	height: 100%;
	position: relative;
	background: url(../img/animate/bg.png) no-repeat;
	background-size: 100% 100%;
	display: none;
}
.animate_txt div{
	position: absolute;
	top: 28%;
	left: 0;
	right: 0;
	text-align: center;
	line-height: 0.2rem;
	color: #fff;
}
.animate_dong{
	width: 100%;
	height: 100%;
	position: relative;
	background: url(../img/animate/bg1.png) no-repeat;
	background-size: 100% 100%;
	display: none;
}
.animate_dong .fly{
	width: 80.3125%;
	position: absolute;
	left: 100%;
	top: 78.7%;
}
.animate_dong .phone{
	width: 31%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	display: none;
	animation: phone 2s linear;
}
@keyframes phone{
	from{width: 5%;transform: rotate(0deg);}
	to{width: 31%;transform: rotate(720deg);}
}
.star{
	width: 100%;
	height: 100%;
	background: url(../img/star/bg.png) no-repeat;
	background-size: 100% 100%;
	display: none;
	position: relative;
}
.star img{
	position: absolute;
}
.star .venus{
	width: 20%;
	left: 23%;
	top: 27%;
	animation: venus 3s linear 1.5s forwards;
}
@keyframes venus{
	from{width: 20%; left: 23%;top: 27%;}
	to{width: 1%;left: 45.3%;top: 29%;}
}
.star .jupiter{
	width: 16.56%;
	left: 52.5%;
	top: 53.17%;
	animation: jupiter 3s linear 1.5s forwards;
}
@keyframes jupiter{
	from{width: 16.56%;left: 52.5%;top: 53.17%;}
	to{width: 1%;left: 47.2%;top: 66.6%;}
}
.star .earth{
	width: 11.875%;
	left: 28.125%;
	top: 53.17%;
	animation: earth 3s linear 1.5s forwards;
}
@keyframes earth{
	from{width: 11.875%;left: 28.125%;top: 53.17%;}
	to{width: 1%;left: 23.8%;top: 56.8%;}
}
.star .saturn{
	width: 19.688%;
	left: 18.75%;
	top: 40.7%;
	animation: saturn 3s linear 1.5s forwards;
}
@keyframes saturn{
	from{width: 19.688%;left: 18.75%;top: 40.7%;}
	to{width: 1%;left: 18.8%;top: 38.3%;}
}
.star .mercury{
	width: 18.125%;
	left: 38.4%;
	top: 38.58%;
	animation: mercury 3s linear 1.5s forwards;
}
@keyframes mercury{
	from{width: 18.125%;left: 38.4%;top: 38.58%;}
	to{width: 1%;left: 54.1%;top: 40.5%;}
}
.star .neptune{
	width: 15%;
	left: 57.1875%;
	top: 26.3%;
	animation: neptune 3s linear 1.5s forwards;
}
@keyframes neptune{
	from{width: 15%;left: 57.1875%;top: 26.3%;}
	to{width: 1%;left: 78.8%;top: 31.7%;}
}
.star .uranus{
	width: 9.06%;
	left: 60%;
	top: 38.58%;
	animation: uranus 3s linear 1.5s forwards;
}
@keyframes uranus{
	from{width: 9.06%;left: 60%;top: 38.58%;}
	to{width: 1%;left: 78.8%;top: 42.3%;}
}
.star .mars{
	width: 11.875%;
	left: 67.81%;
	top: 45.87%;
	animation: mars 3s linear 1.5s forwards;
}
@keyframes mars{
	from{width: 11.875%;left: 67.81%;top: 45.87%;}
	to{width: 1%;left: 78.8%;top: 60.5%;}
}
.star2{
	width: 100%;
	height: 100%;
	background: url(../img/star/bg2.png) no-repeat;
	background-size: 100% 100%;
	background-position: 0 0;
	position: relative;
	display: none;
}
.star2 p{
	width: 100%;
	height: 6%;
	color: #fff;
	line-height: 4.2%;
	text-align: center;
	position: absolute;
	bottom: 5%;
	animation: p 0.5s linear infinite;
}
@keyframes p{
	from{bottom: 5%;}
	50%{bottom: 6%;}
	to{bottom: 5%;}
}
.star2 p img{
	width: 7.8125%;
	position: absolute;
	bottom: 12%;
	left: 46.09375%;
}
.start{
	width: 100%;
	height: 100%;
	background: url(../img/start/bg.png) no-repeat;
	background-size: 100% 100%;
	position: relative;
	display: none;
}
.kuang{
	width: 96.25%;
	height: 65.45%;
	background: url(../img/start/content.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	left: 1.875%;
	top: -65.6%;
	animation: kuang 1s linear forwards;
}
@keyframes kuang{
	from{top: -65.6%;}
	to{top: 17.275%;}
}
.kuang .time{
	width: 16.84%;
	text-align: center;
	color: #ff0000;
	line-height: 5.298%;
	font-size: 0.14rem;
	position: absolute;
	left: 41.58%;
	top: 4%;
}
.kuang .txt{
	width: 40.58%;
	position: absolute;
	left: 29.71%;
	top: -16%;
}
.start .tu1{
	position: absolute;
}
.start .first1{
	width: 11.5625%;
	right: 11.5625%;
	top: 4.2226%;
	animation: first1 3s linear infinite;
}
@keyframes first1{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.start .first2{
	width: 11.875%;
	left: 6.5625%;
	bottom: 7.6775%;
	animation: first2 3s linear infinite;
}
@keyframes first2{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.start .first3{
	width: 10.625%;
	right: 5.625%;
	bottom: 9.1%;
	animation: first3 3s linear infinite;
}
.start .state{
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0,0,0,0.7);
	display: none;
}
.start .state img{
	width: 65.3125%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
@keyframes first3{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.fail{
	width: 100%;
	height: 100%;
	position: relative;
	display: none;
}
.fail img:nth-child(1){
	width: 100%;
	height: 100%;
}
.fail .again{
	width: 36.25%;
	position: absolute;
	left: 31.8755%;
	top: 57%;
}
.fail .shuoming{
	width: 36.25%;
	position: absolute;
	left: 31.8755%;
	top: 62.76%;
}
.content{
	width: 100%;
	height: 100%;
	text-align: center;
}
.start .kong{
	height: 16.5%;
}
.end{
	width: 100%;
	height: 100%;
	position: relative;
	background: url(../img/end/bg.png);
	background-size: 100% 100%;
	display: none;
}
.end .text{
	width: 42%;
	color: white;
	font-size: 0.14rem;
	line-height: 0.16rem;
	text-align: center;
	position: absolute;
	top: 5%;
	left: 29%;
}
.he{
	display: none;
}
.he img{
	position: absolute;
}
.he .p1{
	width: 39.375%;
	left: 9%;
	top: 5%;
	animation: p1 0.6s linear 1.5s forwards;
}
@keyframes p1{
	from{left: 9%;t: 5%;}
	to{left: 21.5625%;top: 18.23%;}
}
.he .p2{
	width: 37.1875%;
	left: 56%;
	top: 10%;
	animation: p2 0.6s linear 1.5s forwards;
}
@keyframes p2{
	from{left: 56%;top: 10%;}
	to{left: 45.3125%;top: 18.23%;}
}
.he .p3{
	width: 43.4375%;
	left: 42%;
	top: 12.56%;
	animation: p3 0.6s linear 1.5s forwards;
}
@keyframes p3{
	from{left: 42%;top: 12.56%;}
	to{left: 39.0625%;top: 27.18%;}
}
.he .p4{
	width: 34.375%;
	left: 6.5%;
	top: 33%;
	animation: p4 0.6s linear 1.5s forwards;
}
@keyframes p4{
	from{left: 6.5%;top: 33%;}
	to{left: 21.5625%;top: 35.05%;}
}
.he .p5{
	width: 32.8125%;
	left: 62%;
	top: 68%;
	animation: p5 0.6s linear 1.5s forwards;
}
@keyframes p5{
	from{left: 62%;top: 68%;}
	to{left: 39.8%;top: 35.8%;}
}
.he .p6{
	width: 30.625%;
	left: 45%;
	top: 45%;
	animation: p6 0.6s linear 1.5s forwards;
}
@keyframes p6{
	from{left: 45%;top: 45%;}
	to{left: 51.9%;top: 49.75%;}
}
.he .p7{
	width: 34.375%;
	left: 2%;
	top: 75%;
	animation: p7 0.6s linear 1.5s forwards;
}
@keyframes p7{
	from{left: 2%;top: 75%;}
	to{left: 21.5625%;top: 61.3%;}
}
.he .p8{
	width: 44.375%;
	left: 49%;
	top: 78%;
	animation: p8 0.6s linear 1.5s forwards;
}
@keyframes p8{
	from{left: 49%;top: 78%;}
	to{left: 38.1%;top: 68.0%;}
}
.success{
	width: 100%;
	height: 100%;
	display: none;
}
.success .heti{
	width: 57.5%;
	position: absolute;
	left: 21.25%;
	top: 18.6%;
}
.success .choujiang{
	width: 36.25%;
	position: absolute;
	left: 31.8755%;
	top: 63.1%;	
}
.success .shuoming{
	width: 36.25%;
	position: absolute;
	left: 31.8755%;
	top: 69.2%;	
}
.explain{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	position: fixed;
	display: none;
	z-index: 9;
}
.explain .shuo{
	width: 65.3125%;
	position: absolute;
	top: 22%;
	left: 17.35%;
}
.explain .guan{
	width: 6.875%;
	position: absolute;
	top: 23.3%;
	left: 72.5%;
}
.explain .con{
	width: 55.3%;
	height: 40%;
	overflow: hidden;
	position: absolute;
	left: 22.5%;
	top: 31%;
}
.explain .con .txt1{
	width: 90.4%;
	color: #fff;
	line-height: 0.14rem;
}
.explain .con .scroll{
	width: 2.8%;
	position: absolute;
	right: 0;
	top: 0;
}

























